<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改机器人参数配置')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-account-edit" th:object="${ccLlmAgentAccount}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{llmAcount.form.name}"></label>
                    <div class="col-sm-8">
                        <input name="name" th:field="*{name}" class="form-control" required type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{llmAcount.form.providerClassName}"></label>
                    <div class="col-sm-8">
                        <select name="providerClassName" th:field="*{providerClassName}" class="form-control" required id="providerClassNameSelect">
                            <!-- 选项将通过 JavaScript 动态填充 -->
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12" id="dynamicFieldsContainer">
                <!-- 动态字段将在这里显示 -->
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{llmAcount.form.interruptFlag}"></label>
                    <div class="col-sm-8">
                        <label class="radio-inline">
                            <input type="radio" name="interruptFlag" value="1" onclick="toggleInterruptFields(true)" th:field="*{interruptFlag}" th:text="#{llmAcount.form.interruptFlag1}">
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="interruptFlag" value="0" onclick="toggleInterruptFields(false)" th:field="*{interruptFlag}" th:text="#{llmAcount.form.interruptFlag0}">
                        </label>
                    </div>
                </div>
            </div>
            <div class="col-xs-12" id="interruptKeywordsContainer" style="display: none;">
                <div class="form-group">
                    <label class="col-sm-3 control-label " th:text="#{llmAcount.form.interruptKeywords}"></label>
                    <div class="col-sm-8">
                        <textarea name="interruptKeywords" class="form-control" rows="5" th:field="*{interruptKeywords}"></textarea>
                    </div>
                </div>
            </div>
            <div class="col-xs-12" id="interruptIgnoreKeywordsContainer" style="display: none;">
                <div class="form-group">
                    <label class="col-sm-3 control-label " th:text="#{llmAcount.form.interruptIgnoreKeywords}"></label>
                    <div class="col-sm-8">
                        <textarea name="interruptIgnoreKeywords" class="form-control" rows="5" th:field="*{interruptIgnoreKeywords}"></textarea>
                    </div>
                </div>
            </div>
            <div class="col-xs-12" id="intentionTipsContainer" >
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{llmAcount.form.intentionTips}"></label>
                    <div class="col-sm-8">
                        <textarea name="intentionTips" class="form-control" rows="5" th:field="*{intentionTips}"></textarea>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "aicall/account"
        var _interruptFlag = [[${ccLlmAgentAccount.interruptFlag}]];
        var _accountJson = JSON.parse([[${ccLlmAgentAccount.accountJson}]]);
        var _providerClassName = [[${ccLlmAgentAccount.providerClassName}]];
        var _dynamicFieldsDiv = initDynamicFieldsDiv(_accountJson);

        $(document).ready(function() {
            // 获取实现类下拉框数据
            $.ajax({
                url: ctx + "aicall/provider/all", // 接口地址
                type: "GET",
                success: function(response) {
                    // 假设返回的数据是一个数组，例如：[{providerClassName: "Provider1"}, {providerClassName: "Provider2"}]
                    var providers = response.data;
                    var select = $("#providerClassNameSelect");
                    select.empty(); // 清空之前的选项
                    providers.forEach(function(provider) {
                        select.append($("<option>", {
                            value: provider.providerClassName,
                            text: provider.providerClassName
                        }));
                    });
                    select.val(_providerClassName);
                    // 初始化动态字段
                    updateDynamicFields(select.val());
                },
                error: function(xhr, status, error) {
                    console.error("获取实现类数据失败:", error);
                }
            });

            // 监听下拉框变化
            $("#providerClassNameSelect").change(function() {
                updateDynamicFields($(this).val());
            });
            if (_interruptFlag) {
                toggleInterruptFields(true);
            } else {
                toggleInterruptFields(false);
            }
        });

        // 根据选择的实现类动态更新表单字段
        function updateDynamicFields(providerClassName) {
            var container = $("#dynamicFieldsContainer");
            container.empty(); // 清空之前的动态字段

            $("#intentionTipsContainer").hide(); // 客户意向提示词默认隐藏

            if (["DeepSeekChat", "ChatGpt4o", "JiutianLlm"].includes(providerClassName)) {
                // 显示serverUrl、apiKey、modelName、
                // llmTips、faqContext、transferToAgentTips、hangupTips、customerNoVoiceTips、openingRemarks
                container.append(_dynamicFieldsDiv["serverUrl"]);
                container.append(_dynamicFieldsDiv["apiKey"]);
                container.append(_dynamicFieldsDiv["modelName"]);
                container.append(_dynamicFieldsDiv["llmTips"]);
                container.append(_dynamicFieldsDiv["faqContext"]);
                container.append(_dynamicFieldsDiv["transferToAgentTips"]);
                container.append(_dynamicFieldsDiv["hangupTips"]);
                container.append(_dynamicFieldsDiv["customerNoVoiceTips"]);
                container.append(_dynamicFieldsDiv["openingRemarks"]);

                // intentionTipsContainer
                $("#intentionTipsContainer").show();
            }
            if (["Coze"].includes(providerClassName)) {
                // 显示 serverUrl、botId、tokenType、tokenTypeFields、
                // transferToAgentTips、hangupTips、customerNoVoiceTips、openingRemarks
                container.append(_dynamicFieldsDiv["serverUrl"]);
                container.append(_dynamicFieldsDiv["botId"]);
                container.append(_dynamicFieldsDiv["tokenType"]);
                container.append(_dynamicFieldsDiv["tokenTypeFields"]);
                container.append(_dynamicFieldsDiv["transferToAgentTips"]);
                container.append(_dynamicFieldsDiv["hangupTips"]);
                container.append(_dynamicFieldsDiv["customerNoVoiceTips"]);
                container.append(_dynamicFieldsDiv["openingRemarks"]);

                // 监听 tokenType 下拉框变化
                $("#tokenTypeSelect").change(function() {
                    var selectedTokenType = $(this).val();
                    updateTokenTypeSelect(selectedTokenType);
                });

                var selectedTokenType = $("#tokenTypeSelect").val();
                updateTokenTypeSelect(selectedTokenType);
            }
            if (["MaxKB"].includes(providerClassName)) {
                // 显示serverUrl、apiKey、
                // transferToAgentTips、hangupTips、customerNoVoiceTips、openingRemarks
                container.append(_dynamicFieldsDiv["serverUrl"]);
                container.append(_dynamicFieldsDiv["apiKey"]);
                container.append(_dynamicFieldsDiv["transferToAgentTips"]);
                container.append(_dynamicFieldsDiv["hangupTips"]);
                container.append(_dynamicFieldsDiv["customerNoVoiceTips"]);
                container.append(_dynamicFieldsDiv["openingRemarks"]);
            }
            if (["Dify"].includes(providerClassName)) {
                // 显示serverUrl、apiKey、
                // transferToAgentTips、hangupTips、customerNoVoiceTips、openingRemarks
                container.append(_dynamicFieldsDiv["serverUrl"]);
                container.append(_dynamicFieldsDiv["apiKey"]);
                container.append(_dynamicFieldsDiv["transferToAgentTips"]);
                container.append(_dynamicFieldsDiv["hangupTips"]);
                container.append(_dynamicFieldsDiv["customerNoVoiceTips"]);
                container.append(_dynamicFieldsDiv["openingRemarks"]);
            }
            if (["JiutianWorkflow"].includes(providerClassName)) {
                // 显示serverUrl、apiKey、
                // transferToAgentTips、hangupTips、customerNoVoiceTips、openingRemarks
                container.append(_dynamicFieldsDiv["serverUrl"]);
                container.append(_dynamicFieldsDiv["apiKey"]);
                container.append(_dynamicFieldsDiv["botId"]);
                container.append(_dynamicFieldsDiv["transferToAgentTips"]);
                container.append(_dynamicFieldsDiv["hangupTips"]);
                container.append(_dynamicFieldsDiv["customerNoVoiceTips"]);
                container.append(_dynamicFieldsDiv["openingRemarks"]);
            }

        }

        function updateTokenTypeSelect(selectedTokenType){
            console.log(selectedTokenType)
            if (selectedTokenType === "oauth") {
                $(".oauthFields").show();
                $(".patFields").hide();
            } else if (selectedTokenType === "pat") {
                $(".patFields").show();
                $(".oauthFields").hide();
            }
        }

        $("#form-account-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($("#form-account-edit").valid()) {
                // 收集动态字段
                var dynamicFields = {};
                $("#dynamicFieldsContainer").find("input, textarea, select").each(function() {
                    var fieldName = $(this).attr("name");
                    var fieldValue = $(this).val();
                    if (fieldValue === undefined || fieldValue === null) {
                        fieldValue = ""; // 如果未填写值，则传递空字符串
                    }
                    dynamicFields[fieldName] = fieldValue;
                });
                // 将 JSON 字符串添加到表单数据中
                var formData = $('#form-account-edit').serializeArray();
                formData.push({"name": "accountJson", "value": JSON.stringify(dynamicFields)})
                $.operate.save(prefix + "/edit", formData);
            }
        }
        function toggleInterruptFields(show) {
            if (show) {
                document.getElementById('interruptKeywordsContainer').style.display = 'block';
                document.getElementById('interruptIgnoreKeywordsContainer').style.display = 'block';
            } else {
                document.getElementById('interruptKeywordsContainer').style.display = 'none';
                document.getElementById('interruptIgnoreKeywordsContainer').style.display = 'none';
            }
        }

        function initDynamicFieldsDiv(_accountJson){
            let dynamicFieldsDiv = {};
            // serverUrl
            dynamicFieldsDiv["serverUrl"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.serverUrl")}</label>
                <div class="col-sm-8">
                    <input name="serverUrl" value="${_accountJson.serverUrl || ''}" class="form-control" type="text" required>
                </div>
            </div>`;

            // apiKey
            dynamicFieldsDiv["apiKey"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.apiKey")}</label>
                <div class="col-sm-8">
                    <input name="apiKey" value="${_accountJson.apiKey || ''}" class="form-control" type="text" required>
                </div>
            </div>`;

            // modelName
            dynamicFieldsDiv["modelName"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.modelName")}</label>
                <div class="col-sm-8">
                    <input name="modelName" value="${_accountJson.modelName || ''}" class="form-control" type="text" required>
                </div>
            </div>`;

            // botId
            dynamicFieldsDiv["botId"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.botId")}</label>
                <div class="col-sm-8">
                    <input name="botId" value="${_accountJson.botId || ''}" class="form-control" type="text" required>
                </div>
            </div>`;

            // tokenType
            dynamicFieldsDiv["tokenType"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.tokenType")}</label>
                <div class="col-sm-8">
                    <select name="tokenType" value="${_accountJson.tokenType || ''}" class="form-control" required id="tokenTypeSelect">
                        <option value="oauth">oauth</option>
                        <option value="pat">pat</option>
                    </select>
                </div>
            </div>`;

            // tokenTypeFields
            dynamicFieldsDiv["tokenTypeFields"] = `<div id="tokenTypeFields">
                <div class="form-group oauthFields" style="display:none;">
                    <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.oauthClientId")}</label>
                    <div class="col-sm-8">
                        <input name="oauthClientId" value="${_accountJson.oauthClientId || ''}" class="form-control" type="text" required>
                    </div>
                </div>
                <div class="form-group oauthFields" style="display:none;">
                    <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.oauthPrivateKey")}</label>
                    <div class="col-sm-8">
                        <input name="oauthPrivateKey" value="${_accountJson.oauthPrivateKey || ''}" class="form-control" type="text" required>
                    </div>
                </div>
                <div class="form-group oauthFields" style="display:none;">
                    <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.oauthPublicKeyId")}</label>
                    <div class="col-sm-8">
                        <input name="oauthPublicKeyId" value="${_accountJson.oauthPublicKeyId || ''}" class="form-control" type="text" required>
                    </div>
                </div>
                <div class="form-group patFields" style="display:none;">
                    <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.patToken")}</label>
                    <div class="col-sm-8">
                        <textarea name="patToken" class="form-control" rows="3" required>${_accountJson.patToken || ''}</textarea>
                    </div>
                </div>
            </div>`;

            // llmTips
            dynamicFieldsDiv["llmTips"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.llmTips")}</label>
                <div class="col-sm-8">
                    <textarea name="llmTips" class="form-control" rows="30" required>${_accountJson.llmTips || ''}</textarea>
                </div>
            </div>`;

            // faqContext
            dynamicFieldsDiv["faqContext"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.faqContext")}</label>
                <div class="col-sm-8">
                    <textarea name="faqContext" class="form-control" rows="30" required>${_accountJson.faqContext || ''}</textarea>
                </div>
            </div>`;

            // transferToAgentTips
            dynamicFieldsDiv["transferToAgentTips"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.transferToAgentTips")}</label>
                <div class="col-sm-8">
                    <textarea name="transferToAgentTips" class="form-control" rows="3" required>${_accountJson.transferToAgentTips || ''}</textarea>
                </div>
            </div>`;

            // hangupTips
            dynamicFieldsDiv["hangupTips"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.hangupTips")}</label>
                <div class="col-sm-8">
                    <textarea name="hangupTips" class="form-control" rows="3" required>${_accountJson.hangupTips || ''}</textarea>
                </div>
            </div>`;

            // customerNoVoiceTips
            dynamicFieldsDiv["customerNoVoiceTips"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.customerNoVoiceTips")}</label>
                <div class="col-sm-8">
                    <textarea name="customerNoVoiceTips" class="form-control" rows="3" required>${_accountJson.customerNoVoiceTips || ''}</textarea>
                </div>
            </div>`;

            // openingRemarks
            dynamicFieldsDiv["openingRemarks"] = `<div class="form-group">
                <label class="col-sm-3 control-label is-required">${i18n("llmAcount.form.openingRemarks")}</label>
                <div class="col-sm-8">
                    <textarea name="openingRemarks" class="form-control" rows="3" required>${_accountJson.openingRemarks || ''}</textarea>
                </div>
            </div>`;

            return dynamicFieldsDiv;

        }
    </script>
</body>
</html>